<template>
  <div id="app">
    <el-tabs type="border-card" tab-position="top" class="mytabs">
      <el-tab-pane label="创建店铺">
        <el-form ref="form" :model="form" label-width="80px" class="myform">
          <el-form-item label="店铺名称" prop="name" :rules="{required: true, message: '请输入名称'}">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" prop="address" :rules="{required: true, message: '请输入地址'}">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" :rules="{required: true, message: '请输入电话'}">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="店铺类型" prop="type" :rules="{required: true, message: '请选择类型'}">
            <el-select v-model="form.type" placeholder="请选择店铺类型">
              <el-option label="线上店铺" value="0"></el-option>
              <el-option label="线下店铺" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营类目" prop="scope" :rules="{required: true, message: '请至少选择一项'}">
            <el-radio-group v-model="form.scope">
              <el-radio label="餐饮美食"></el-radio>
              <el-radio label="教育培训"></el-radio>
              <el-radio label="美妆护肤"></el-radio>
              <el-radio label="酒店宾馆"></el-radio>
              <el-radio label="理发店"></el-radio>
              <el-radio label="健身房"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="店铺介绍" prop="description">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import API from "../../utils/Api";
export default {
  data() {
    return {
      form: {
        name: "",
        address: "",
        phone: "",
        type: "",
        scope: "",
        description: ""
      }
    };
  },
  methods: {
    onSubmit() {
      let self = this;
      this.$refs["form"].validate(d => {
        if (d) {
          API.shop.addShop(self.form, res => {
            if (res.code === 200) {
              self.$message({
                type: "success",
                message: "创建成功"
              });
              this.$router.push("/");
            } else {
              self.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        } else {
          self.$message({
            type: "warning",
            message: "请输入必要信息"
          });
        }
      });
    },
    cancel() {
      this.$router.back(-1);
    }
  }
};
</script>
<style scoped>
#app {
  padding: 0px;
}

.mytabs {
  width: 100%;
  margin-top: -1px;
  height: cale(100% - 1px);
}

.myform {
  width: 80%;
}
</style>